<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>CSS样式</title>
	<!-- html中元素自带属性和属性值   做单个元素的效果 
	     css3样式表  整体或者单个元素的效果
		 使用css--1.引入css3样式【4种】
		             1.1内联样式表   不建议使用  没有实现内容与表现分离
					 1.2内部样式表   练习专用
					    1.2.1 使用方式  --head元素 添加style元素 
						1.2.2 编写css语法    选择器--元素选择器：抓取页面元素
					1.3外部样式表   项目专用
						1.3.1 使用方式 --head元素  添加 link元素，指定css文件
						1.3.2 创建  xxx.css 文件
					1.4引入样式表	不用，致命bug，css2语法
						1.4.1 使用 --head元素  添加 style元素
						1.4.2 创建 xxx.css文件
						1.4.3 在style元素中加 @import url(xxx.css)
						缺点：项目内容大，先执行结构执行出来，等一会，效果加不上
						      先执行效果css，然后在执行结构html
		          2.编写css3语法：css属性和属性值使用  
	-->
	<style>
		@import url(css/引入样式表.css);
		/*css3注释*/
		p{
			/*css3属性和属性值：添加【样式】效果*/
			/*效果：居中*/
			text-align: center;
			/* 效果：背景颜色   色值：十六进制  网页三原色：红绿蓝*/
			background-color: #ff5000; /*京东红 主题色*/
			/*效果：文本放大*/
			font-size: 50px;
			/*效果：宽高*/
			width: 249px;
			height: 249px;
			/*效果：行高与高度一致：  垂直居中*/
			line-height: 249px;
		}
	</style>
	<link rel="stylesheet" href="css/index.css">
	</head>
	<body>
		<!-- html 效果 -->
		<p>lorem1</p>
		<!-- css  效果 -->
		<p>lorem2</p>
		<span>行元素内容</span>
	</body>
</html>
